import { Button, Modal, Table, Popconfirm, message, Space } from 'antd'
import { http } from '@/utils'
import React, { useState, useImperativeHandle } from 'react'
import Configmodal from './Configmodal'
import { useStore } from '@/store'
import './index.scss'
const { Column, ColumnGroup } = Table
const Configlistmodal = (props) => {
  const [loading, setLoading] = useState(false)
  const [showModalOpen, setShowModalOpen] = useState(false)
  const [groupId, setGroupId] = useState(null)
  const { loginStore } = useStore()
  const configModalOpenOk = () => {
    setShowModalOpen(false)
  }
  const configModalOpenCancel = () => {
    setShowModalOpen(false)
  }

  // 预警组预警配置model
  const childConfigRef = React.createRef()
  const showAddorConfigModalOpen = (data) => {
    data = {
      ...data,
      id: data.groupId,
    }
    // setShowModalOpen(false)
    childConfigRef.current.openModalOpen(data)
  }
  const changeConfig = (msg) => {
    console.log(msg)
    getList()
  }

  // 父组件调用打开模态框
  useImperativeHandle(props.onRef, () => {
    return {
      openModalOpen: openModalOpen,
    }
  })
  // 打开model 初始化
  const openModalOpen = async (data) => {
    console.log(data)
    setGroupId(data.id)
    setShowModalOpen(true)
    getList(data.id)
  }

  const delConfig = async (data) => {
    setLoading(true)
    const res = await http.post('/alarm/deliversign/deleteConfigByConfigId', { configId: data.configId })
    setLoading(false)
    message.success(res.body)
    getList()
  }


  const [configList, setConfigList] = useState([])
  const getList = async (id) => {
    const res = await http.post('/alarm/deliversign/findConfigs', { groupId: id ? id : groupId, userId: loginStore.userId })
    let list = []
    for (let i = 0; i < res.body.length; i++) {
      const el = res.body[i]
      const row = el.tbAlarmConfigDetialList.map((item, index) => {
        return {
          ...item,
          ...el,
          rowSpan: el.tbAlarmConfigDetialList.length,
          id: item.id + '_' + index
        }
      })
      list = [
        ...list, ...row
      ]
    }
    console.log('预警组配置列表-', list)
    setConfigList(list)
  }
  return (
    <>
      <Modal
        title="配置列表"
        open={showModalOpen}
        onOk={configModalOpenOk}
        onCancel={configModalOpenCancel}
        width={1400}
        footer={[
          <Button key="submit" type="primary" onClick={configModalOpenCancel}>
            关闭
          </Button>
        ]}
      >
        <Table
          style={{ marginTop: 20 }}
          size="small"
          rowKey="id"
          dataSource={configList}
          pagination={false}
          bordered
        >
          <Column title="编号" align='center' width={50} dataIndex="configId" key="configId" onCell={(_, index) => {
            if (_.id.indexOf('_0') !== -1) {
              return {
                rowSpan: _.rowSpan
              }
            } else {
              return {
                rowSpan: 0
              }
            }
          }} />
          <Column title="预警方法" align='center' width={100} dataIndex="alarmMethodListText" key="alarmMethodListText" onCell={(_, index) => {
            if (_.id.indexOf('_0') !== -1) {
              return {
                rowSpan: _.rowSpan
              }
            } else {
              return {
                rowSpan: 0
              }
            }
          }} />
          <Column
            title="预警对象"
            onCell={(_, index) => {
              if (_.id.indexOf('_0') !== -1) {
                return {
                  rowSpan: _.rowSpan
                }
              } else {
                return {
                  rowSpan: 0
                }
              }
            }}
            render={(data) => {
              return (<div style={{ display: 'flex', flexDirection: 'column' }}>
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;用户：{data.userListText}
                </div>
                <div style={{ borderBottom: '1px solid #f0f0f0', margin: '8px 0' }}></div>
                <div style={{
                  display: 'inline-block',
                  width: 350,
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-all',
                  wordWrap: 'break-word'
                }}>
                  群标识：{data.webhookList}
                </div>
              </div>)
            }}>
          </Column>
          <ColumnGroup title="订阅信号">
            <Column title="预警周期" width={90} align='center' dataIndex="freqIdText" key="factorIdText" />
            <Column title="预警因子" dataIndex="factorIdText" key="factorIdText" />
            <Column title="交易方向" width={90} align='center' dataIndex="tradeDirectionText" key="factorIdText" />
          </ColumnGroup>
          <Column
            title="操作"
            align='center'
            onCell={(_, index) => {
              if (_.id.indexOf('_0') !== -1) {
                return {
                  rowSpan: _.rowSpan
                }
              } else {
                return {
                  rowSpan: 0
                }
              }
            }}
            render={data => {
              return (<Space size="middle">
                <Button size="small" onClick={(e) => showAddorConfigModalOpen(data)}>编辑</Button>
                <Popconfirm
                  title={`确认删除该条预警配置吗？`}
                  onConfirm={() => delConfig(data)}
                  okText="确认"
                  cancelText="取消"
                >
                  <Button size="small" loading={loading}>删除</Button>
                </Popconfirm>
              </Space>)
            }} />

        </Table>
      </Modal>

      <Configmodal onRef={childConfigRef} changeConfig={changeConfig} dictData={props.dictData}></Configmodal>
    </>
  )
}
export default Configlistmodal
